<template>
  <li>
    <div class="row">
      <span class="label">{{ item.label }}</span>
      <slot name="subTitle" />
    </div>
    <div class="row">
      <button @click="deleteHandler">删除</button>
    </div>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
import { TodoItemData } from './types'

@Component
export default class TodoList extends Vue {
  @Prop({
    type: Object,
    default: (): TodoItemData => ({
      label: '',
    }),
  }) public item!: TodoItemData

  @Emit('delete')
  public deleteHandler() {}
}
</script>

<style>
  .row {
    margin: 5px 0;
  }

  .label{
    font-size: 20px;
    margin-right: 20px;
  }
</style>
